<template>
  <div class="ybox">
    <!-- main1 -->
    <div class="main1">
      <div class="main1-1">
        <img
          @click="searchShow"
          class="main1-img"
          src="../../assets/images/contract-search.png"
          alt=""
        />
        <div class="main1-1-2">
          {{ currentSymbolInfo.symbolName }} {{ $t("common.yongxu") }}
        </div>
        <div
          class="main1-1-3"
          :class="priceObj.riseAndFallRange > 0 ? 'green' : 'red'"
        >
          {{
            priceObj.riseAndFallRange > 0
              ? "+" + priceObj.riseAndFallRange
              : priceObj.riseAndFallRange
          }}%
        </div>
      </div>
      <img
        @click="goKline"
        class="main1-2"
        src="../../assets/images/contract-tu1.png"
        alt=""
      />
    </div>
    <div style="height:12vw;background: #090A1B;"></div>
    <!-- main2 -->
    <div class="main2">
      <div class="main2-1">
        <div class="opbox" @click="handleShowMode">
          <div class="op1">
            {{
              currentModeInfo.mode == 1
                ? $t("common.quancang")
                : $t("long.zhucang")
            }}
          </div>
          <img class="opx-img" src="../../assets/images/xia.png" alt="" />
        </div>
        <div class="opbox" @click="handleShowMultiple">
          <div class="op1">{{ currentModeInfo.multiple }}X</div>
          <img class="opx-img" src="../../assets/images/xia.png" alt="" />
        </div>
      </div>
      <div class="main2-2">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="5000"
          height="60"
          :show-indicators="false"
        >
          <van-swipe-item>
            <div class="nsbox">
              <div class="nsf1" @click="showTopRightTextModel(1)">
                {{ $t("long.zijinfeilvdjs") }}/{{ $t("common.daojishi") }}
              </div>
              <div class="nsf2">
                {{ priceObj.fundingRate }}%/
                <van-count-down :time="timeDowner" />
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="nsbox">
              <div class="nsf1" @click="showTopRightTextModel(2)">
                {{ $t("long.dangqianfxbzj") }}
              </div>
              <div class="nsf2">
                {{
                  $formatMoney(riskValue, +currentSymbolInfo.mainCurAccuracy)
                }}
                USDT
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- main3 -->
    <div class="main3">
      <div class="main3-l">
        <Deepth
          ref="deepth"
          :deepthData="deepthData"
          @getDeepData="getDeepData"
          @choosePrice="choosePrice"
          :priceObj="priceObj"
          :curyType="curyType"
          :currentSymbolInfo="currentSymbolInfo"
        />
      </div>
      <div class="main3-r">
        <div class="m3box">
          <div
            :class="openOrClose == 1 ? 'kbtn1 kbtn1-active' : 'kbtn1'"
            @click="handleChangeOpenOrClose(1)"
          >
            {{ $t("common.kaicang") }}
          </div>
          <div
            :class="openOrClose == 2 ? 'kbtn1 kbtn1-active' : 'kbtn1'"
            @click="handleChangeOpenOrClose(2)"
          >
            {{ $t("common.pingcang") }}
          </div>
        </div>
        <div class="m3box2">
          <div class="fxx">{{ $t("common.keyong") }}</div>
          <div class="fxx" @click="$router.push('/transfer')">
            <div class="fxx1">
              {{ pageFormObj.margin }} {{ currentSymbolInfo.mainCurName }}
            </div>
            <img
              class="fxx-img"
              src="../../assets/images/transfer.png"
              alt=""
            />
          </div>
        </div>
        <div class="m3box3">
          <van-dropdown-menu class="drbox" active-color="#0a7aff">
            <van-dropdown-item
              class="dritem"
              v-model="priceModel"
              :options="option1"
            />
            <img
              @click="showPriceModelInfo"
              class="drimg"
              src="../../assets/images/particulars.png"
              alt=""
            />
          </van-dropdown-menu>
        </div>
        <div class="shijiabox" v-show="priceModel == 1">
          {{ $t("common.shijia") }}
        </div>
        <div class="minput1" v-show="priceModel == 0" style="margin: 4vw 0">
          <img
            @click="handleShowPriceChange('subtract')"
            class="jian-img"
            src="../../assets/images/jian.png"
            alt=""
          />
          <van-field
            v-model="pageFormObj.price"
            :placeholder="$t('common.jiage') + '（' + 'USDT' + '）'"
            type="number"
          />
          <img
            @click="handleShowPriceChange('add')"
            class="jia-img"
            src="../../assets/images/jia.png"
            alt=""
          />
        </div>
        <div class="mibox">
          <div class="mitop">
            <div
              :class="curyType == 'token' ? 'miitem mi-active' : 'miitem'"
              @click="
                changeCuryType('token')
              "
            >
              {{ currentSymbolInfo.tokenCurName }}
            </div>
            <div
              :class="curyType == 'zhang' ? 'miitem mi-active' : 'miitem'"
              @click="
                changeCuryType('zhang')
              "
            >
              {{ $t("common.zhang") }}
            </div>
            <div
              :class="curyType == 'main' ? 'miitem mi-active' : 'miitem'"
              @click="
               changeCuryType('main')
              "
            >
              {{ currentSymbolInfo.mainCurName }}
            </div>
          </div>
          <div class="minput1">
            <img
              @click="handleShowNumChange('subtract')"
              class="jian-img"
              src="../../assets/images/jian.png"
              alt=""
            />
            <van-field
              v-model="pageFormObj.showNum"
              :placeholder="
                $t('common.shuliang') +
                '（' +
                (curyType != 'zhang'
                  ? curyType == 'token'
                    ? currentSymbolInfo.tokenCurName
                    : currentSymbolInfo.mainCurName
                  : $t('common.zhang')) +
                '）'
              "
              :type="handleInputType(pageFormObj.showNum)"
              @input="
                pageFormObj.showNum =
                  curyType != 'zhang'
                    ? $formatDecimal(
                        pageFormObj.showNum,
                        curyType == 'token'
                          ? +currentSymbolInfo.tokenCurAccuracy
                          : +currentSymbolInfo.mainCurAccuracy
                      )
                    : parseInt(pageFormObj.showNum)
              "
            />
            <img
              @click="handleShowNumChange('add')"
              class="jia-img"
              src="../../assets/images/jia.png"
              alt=""
            />
          </div>
        </div>
        <div class="slibox">
          <van-slider
            class="sliderhua"
            v-model="percentum"
            active-color="#8992AE"
          >
            <template #button>
              <div
                :style="{ width: percentum == 0 ? '0' : '' }"
                class="custom-button"
              >
                {{ percentum }}%
              </div>
              <div style="padding: 5px">
                <img src="../../assets/images/stepa.png" />
              </div>
            </template>
          </van-slider>
          <div class="slhtu">
            <img
              class="slimg"
              v-for="(item, index) in 5"
              :key="index"
              :style="{ height: percentum == index * 25 ? '0' : '' }"
              @click="percentum = index * 25"
              :src="
                percentum >= index * 25
                  ? require('../../assets/images/stepa.png')
                  : require('../../assets/images/step.png')
              "
              alt=""
            />
          </div>
        </div>
        <div v-if="!noLogin">
          <div class="zybox" v-show="openOrClose == 1">
            <div class="zy1">
              <img
                @click="targetIsStop"
                :src="
                  !pageFormObj.isStop
                    ? require('../../assets/images/zhiying.png')
                    : require('../../assets/images/zhiyinga.png')
                "
                alt=""
              />
              <span @click="showStopTextModel">{{
                $t("long.zhiyingsun1")
              }}</span>
            </div>
            <div class="zy2" v-show="pageFormObj.isStop" @click="mainStopShow">
              {{ $t("long.gaoji") }}
            </div>
          </div>
          <div class="zybox2" v-show="pageFormObj.isStop && openOrClose == 1">
            <van-field
              v-model="submitForm.stopProfitTrigger"
              :placeholder="$t('common.zhiying')"
              type="number"
              style="margin-right: 2vw"
            />
            <van-field
              v-model="submitForm.stopLostTrigger"
              :placeholder="$t('common.zhisun')"
              type="number"
            />
          </div>
          <div class="fbox">
            <div class="fli" v-show="openOrClose == 2" style="margin-top: 16vw">
              <div class="fli1">{{ $t("long.keping") }}</div>
              <div class="fli2">
                {{ canCloseDuo
                }}{{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}
              </div>
            </div>
            <div class="fli" v-show="openOrClose == 1">
              <div class="fli1">{{ $t("common.kekai") }}</div>
              <div class="fli2">
                {{ showCanUseNum }}
                {{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}
              </div>
            </div>
            <div class="fli" v-show="openOrClose == 1">
              <div class="fli1">{{ $t("common.baozhengjin") }}</div>
              <div class="fli2">
                {{ showMargin }} {{ currentSymbolInfo.mainCurName }}
              </div>
            </div>
          </div>
          <van-button
            v-show="openOrClose == 1"
            @click="showTwoConfirm('开', '多')"
            class="maybtn"
            color="#00A77F"
            ><span class="span1">{{ $t("common.kaiduo") }}</span
            ><span
              ><br /><span class="span2" v-show="approximate"
                >≈{{ approximate
                }}{{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}</span
              ></span
            ></van-button
          >
          <van-button
            v-show="openOrClose == 2"
            @click="showTwoConfirm('平', '多')"
            class="maybtn"
            color="#E45360"
            ><span class="span1">{{ $t("long.pingduo") }}</span
            ><span
              ><br /><span class="span2" v-show="showCanCloseDuo"
                >≈{{ showCanCloseDuo
                }}{{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}</span
              ></span
            ></van-button
          >
          <div class="fbox">
            <div class="fli" v-show="openOrClose == 2" style="margin-top: 16vw">
              <div class="fli1">{{ $t("long.keping") }}</div>
              <div class="fli2">
                {{ canCloseKong }}
                {{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}
              </div>
            </div>
            <div class="fli" v-show="openOrClose == 1">
              <div class="fli1">{{ $t("common.kekai") }}</div>
              <div class="fli2">
                {{ showCanUseNum }}
                {{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}
              </div>
            </div>
            <div class="fli" v-show="openOrClose == 1">
              <div class="fli1">{{ $t("common.baozhengjin") }}</div>
              <div class="fli2">
                {{ showMargin }} {{ currentSymbolInfo.mainCurName }}
              </div>
            </div>
          </div>
          <van-button
            v-show="openOrClose == 1"
            @click="showTwoConfirm('开', '空')"
            class="maybtn"
            color="#E45360"
            ><span class="span1">{{ $t("common.kaikong") }}</span
            ><span
              ><br /><span class="span2" v-show="approximate"
                >≈{{ approximate
                }}{{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}</span
              ></span
            ></van-button
          >
          <van-button
            v-show="openOrClose == 2"
            @click="showTwoConfirm('平', '空')"
            class="maybtn"
            color="#00A77F"
            ><span class="span1">{{ $t("long.pingkong") }}</span
            ><span
              ><br /><span class="span2" v-show="showCanCloseKong"
                >≈{{ showCanCloseKong
                }}{{
                  curyType != "zhang"
                    ? curyType === "main"
                      ? this.currentSymbolInfo.mainCurName
                      : this.currentSymbolInfo.tokenCurName
                    : $t("common.zhang")
                }}</span
              ></span
            ></van-button
          >
        </div>
        <div v-else>
          <van-button
            style="margin-top: 6vw"
            @click="showRegModel"
            class="maybtn"
            color="#0A7AFF"
            >点击登录</van-button
          >
        </div>
      </div>
    </div>
    <!-- main4 -->
    <div class="main4">
      <div class="main41">
        <img
          class="fotimg"
          @click="toLogList"
          src="../../assets/images/history.png"
          alt=""
        />
        <van-tabs animated swipeable v-model="tabIndex">
          <van-tab
            :title="
              orderList.length || stopOrderList.length
                ? $t('common.dangqianweituo') +
                  '(' +
                  (orderList.length + stopOrderList.length) +
                  ')'
                : $t('common.dangqianweituo')
            "
          >
            <div class="vtbox">
              <div class="vt1" @click="hideOther = !hideOther">
                <img
                  class="hideimg"
                  :src="
                    hideOther
                      ? require('../../assets/images/notarizeyes.png')
                      : require('../../assets/images/notarizeno.png')
                  "
                  alt=""
                />
                {{ $t("long.yincangheyue") }}
              </div>
              <div class="vt2" @click="backoutAllShow = true">
                {{ $t("common.quanbuchexiao") }}
              </div>
            </div>
            <div class="ttt">
              <van-tabs animated swipeable v-model="tabIndex2">
                <van-tab
                  :title="
                    orderList.length
                      ? $t('common.xianjia') +
                        '/' +
                        $t('common.shijia') +
                        '(' +
                        orderList.length +
                        ')'
                      : $t('common.xianjia') + '/' + $t('common.shijia')
                  "
                >
                  <div class="pbox xxx">
                    <div class="lbox" v-for="item in orderList" :key="item.id">
                      <Order
                        :detail="item"
                        :curyType="curyType"
                        @backoutOne="backoutOne"
                      />
                    </div>
                    <div v-show="!orderList.length" class="no_data">
                      <img src="../../assets/images/no_data.png" alt="" />
                      <p>{{ $t("long.zanwushuju") }}</p>
                    </div>
                  </div>
                </van-tab>
                <van-tab
                  :title="
                    stopOrderList.length
                      ? $t('long.zhiyingsun') + '(' + stopOrderList.length + ')'
                      : $t('long.zhiyingsun')
                  "
                >
                  <div class="pbox xxx">
                    <div
                      class="lbox"
                      v-for="item in stopOrderList"
                      :key="item.id"
                    >
                      <StopOrder
                        :detail="item"
                        :curyType="curyType"
                        @backoutOne="backoutOne"
                      />
                    </div>
                    <div v-show="!stopOrderList.length" class="no_data">
                      <img src="../../assets/images/no_data.png" alt="" />
                      <p>{{ $t("long.zanwushuju") }}</p>
                    </div>
                  </div>
                </van-tab>
              </van-tabs>
            </div>
          </van-tab>
          <van-tab
            :title="
              positionList.length
                ? $t('common.chiyoucangwei') + '(' + positionList.length + ')'
                : $t('common.chiyoucangwei')
            "
          >
            <div class="vtbox">
              <div class="vt1" @click="hideOther = !hideOther">
                <img
                  class="hideimg"
                  :src="
                    hideOther
                      ? require('../../assets/images/notarizeyes.png')
                      : require('../../assets/images/notarizeno.png')
                  "
                  alt=""
                />
                {{ $t("long.yincangheyue") }}
              </div>
              <div class="vt2" @click="allCloseShow = true">
                {{ $t("long.yijianpingcang") }}
              </div>
            </div>
            <div class="pbox">
              <div class="lbox" v-for="item in positionList" :key="item.id">
                <Position
                  :detail="item"
                  :curyType="curyType"
                  :getUserInfo="getUserInfo"
                  @shareImg="shareImg"
                  @handlePositionClose="handlePositionClose"
                  @handlePositionStop="handlePositionStop"
                  @showChangeMargin="showChangeMargin"
                  @handlePositonMultiple="handleShowMultiple"
                  @showZhangTip="showZhangTip"
                />
              </div>
              <div v-show="!positionList.length" class="no_data">
                <img src="../../assets/images/no_data.png" alt="" />
                <p>{{ $t("long.zanwushuju") }}</p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- zhangTipDetail:{},
      zhangTipShow:false, -->
      <van-dialog v-model="zhangTipShow" class="oneflatshow" show-cancel-button>
      <div class="fscon">
        <div class="fsbox">
          <div class="fs1">{{$t('common.chicangzhangshu')}}</div>
          <div class="fs2">{{$formatMoney(parseInt(zhangTipDetail.nowNum * zhangTipDetail.sheet), 11)}}</div>
        </div>
        <div class="fsbox">
          <div class="fs1">{{$t('common.chicangbishu')}}</div>
          <div class="fs2">{{zhangTipDetail.nowNum}} {{zhangTipDetail.tokenCurName}}</div>
        </div>
        <div class="fsbox" style="width:100%;flex:1">
          <div class="fs1">{{$t('common.chicangjiazhi')}}</div>
          <div class="fs2">{{$formatMoney(zhangTipDetail.uNowNum, 10)}} {{zhangTipDetail.mainCurName}}</div>
        </div>
      </div>
      <div class="xbutton" style="margin-top:0 !important;width:50vw;">
        <button class="btn2" @click="zhangTipShow=false" style="width:100%;">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
    <van-dialog v-model="allCloseShow" class="oneflatshow" show-cancel-button>
      <img src="../../assets/images/sigh.png" />
      <div class="content">
        {{ $t("long.tip_pingcang1")
        }}<span>{{ $t("long.tip_pingcang2") }}</span>
      </div>
      <div class="xbutton">
        <button class="btn1" @click="allCloseShow = false">
          {{ $t("common.quxiao") }}
        </button>
        <button class="btn2" @click="hanldeAllClose">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
    <van-dialog
      v-model="backoutShow"
      class="oneflatshow chexiaoallshow"
      :title="$t('long.querenchexiao')"
      show-cancel-button
    >
      <div class="xbutton">
        <button class="btn1" @click="backoutShow = false">
          {{ $t("common.quxiao") }}
        </button>
        <button class="btn2" @click="backoutBtn">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
    <van-dialog
      v-model="backoutAllShow"
      class="oneflatshow chexiaoallshow"
      :title="$t('common.tishi')"
      show-cancel-button
    >
      <p>{{ $t("long.quedingquxiaoquanbudan") }}</p>
      <div class="xbutton">
        <button class="btn1" @click="backoutAllShow = false">
          {{ $t("common.quxiao") }}
        </button>
        <button class="btn2" @click="backoutAll">
          {{ $t("common.queding") }}
        </button>
      </div>
    </van-dialog>
    <!-- 平仓model -->
    <ModelClose ref="modelClose" :curyType="curyType" />
    <ModelStop ref="modelStop" :curyType="curyType" />

    <ModelMarginTemp ref="modelMarginTemp" @changeModel="changeModel" />
    <ModelMultiple
      ref="modelMultiple"
      :hierarchy="hierarchy"
      @changeMultiple="changeMultiple"
      :tokenCurName="
        choosePositonDetail.tokenCurName || currentSymbolInfo.tokenCurName
      "
    />
    <ModelTwoConfirm
      ref="modelTwoConfirm"
      :twoConfirmForm="twoConfirmForm"
      @handleConfirm="openPosition"
    />
    <ModelMarginChange ref="modelMarginChange" />
    <ModelMainStop
      ref="modelMainStop"
      :priceObj="priceObj"
      @openPostionStop="openPostionStop"
    />
    <ChooseSymbolList
      ref="chooseSymbolList"
      @chooseSymbolItem="chooseSymbolItem"
    />
    <ShareImg ref="shareImg" />
    <div style="height: 10vw"></div>
    <div class="kxbox" @click="showKLine">
      <div class="kx1">
        {{ currentSymbolInfo.symbolName }} {{ $t("common.yongxu") }}
        {{ $t("common.kxiantubiao") }}
      </div>
      <img class="kx-img" src="../../assets/images/shangla.png" alt="" />
    </div>
    <div
      class="ktushow"
      :style="{ height: kLineShow ? '53vw' : '0' }"
      v-if="kLineShow"
    >
      <img
        class="xiala-img"
        @click="kLineShow = false"
        src="../../assets/images/xiala.png"
        alt=""
      />
      <div class="sbox2">
        <div
          @click="chooseInterval(item, 1)"
          v-for="item in intervalArr1"
          :key="item.num"
          :class="intervalText == item.text ? 'sbitem sbactive' : 'sbitem'"
        >
          {{ item.text1 }}
        </div>
        <div
          :class="chooseIndex != 1 ? 'sbitem sbactive' : 'sbitem'"
          @click="moreShow = !moreShow"
        >
          {{ chooseIndex == 1 ? $t("long.gengduo") : intervalText
          }}<img class="sbimg" src="../../assets/images/xia.png" alt="" />
        </div>
        <div class="dingwei" v-show="moreShow">
          <div
            class="dwitem"
            v-for="item in intervalArr2"
            @click="chooseInterval(item, 2)"
            :key="item.num"
            :class="intervalText == item.text ? 'dwitem dwactive' : 'dwitem'"
          >
            {{ item.text1 }}
          </div>
        </div>
      </div>
      <Tradingview v-if="kLineShow" ref="trade" />
    </div>

    <div v-show="fxShow" class="shade">
      <div class="dialogfx">
        <h2>{{ $t("long.tip_fengxian1") }}</h2>
        <div class="contentfx">
          <p>{{ $t("long.tip_fengxian2") }}</p>
          <p>
            {{ $t("long.tip_fengxian3") }}
          </p>
          <p>{{ $t("long.tip_fengxian4") }}</p>
          <p>
            {{ $t("long.tip_fengxian5") }}
          </p>
          <p>{{ $t("long.tip_fengxian6") }}</p>
          <p>
            {{ $t("long.tip_fengxian7") }}
          </p>
          <p>{{ $t("long.tip_fengxian8") }}</p>
          <p>
            1、{{ $t("long.tip_fengxian9") }}
            <br />
            {{ $t("long.tip_fengxian10") }}
          </p>
          <p>
            2、{{ $t("long.tip_fengxian11") }}
            <br />
            （1）{{ $t("long.tip_fengxian12") }} <br />（2）{{
              $t("long.tip_fengxian13")
            }}
            <br />（3）{{ $t("long.tip_fengxian14") }}
          </p>
          <p>
            3、{{ $t("long.tip_fengxian15") }}<br />
            {{ $t("long.tip_fengxian16") }}
          </p>
          <p>
            4、{{ $t("long.tip_fengxian17") }}<br />
            （1）{{ $t("long.tip_fengxian18") }}<br />
            （2）{{ $t("long.tip_fengxian19") }}
          </p>
          <p>{{ $t("long.tip_fengxian20") }}</p>
          <p>
            1、{{ $t("long.tip_fengxian21") }} <br />2、{{
              $t("long.tip_fengxian22")
            }}
            <br />3、{{ $t("long.tip_fengxian23") }}
          </p>
        </div>
        <div class="imgfx">
          <img
            @click="zhiyingfx = !zhiyingfx"
            :src="
              zhiyingfx
                ? require('../../assets/images/zhiying.png')
                : require('../../assets/images/zhiyinga.png')
            "
            alt=""
          />
          <p>
            {{ $t("long.tip_fengxian24")
            }}<span>《{{ $t("long.tip_fengxian25") }}》</span
            >{{ $t("long.tip_fengxian26")
            }}<span>《{{ $t("long.tip_fengxian27") }}》</span
            >{{ $t("long.tip_fengxian28") }}
          </p>
        </div>
        <van-button
          @click="colosefx(true)"
          :color="zhiyingfx ? '#8992AE' : '#0A7AFF'"
          :disabled="zhiyingfx"
          class="btnfx"
          >{{ $t("long.queren") }}</van-button
        >
        <img
          class="closefx"
          @click="colosefx"
          src="../../assets/images/close.png"
          alt=""
        />
      </div>
    </div>
    <ModelReg ref="modelReg" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Toast, Dialog } from "vant";
import { createSocket } from "../../common/_websocket";
import Deepth from "./components/deepth.vue";
import Position from "./components/position.vue";
import Order from "./components/order.vue";
import StopOrder from "./components/stopOrder.vue";
import ModelClose from "./components/model_close.vue";
import ModelStop from "./components/model_stop.vue";
import ModelMarginTemp from "./components/model_margintemp.vue";
import ModelMultiple from "./components/model_multiple.vue";
import ModelTwoConfirm from "./components/model_twoconfirm.vue";
import ModelMarginChange from "./components/model_marginChange.vue";
import ModelMainStop from "./components/model_mainstop.vue";
import ChooseSymbolList from "../../components/chooseSymbolList";
import ShareImg from "./components/shareImg.vue";
import Tradingview from "../../components/ali-tradingview";
import ModelReg from "../../components/Model_Reg.vue";
export default {
  components: {
    Deepth,
    Position,
    Order,
    StopOrder,
    ModelClose,
    ModelStop,
    ModelMainStop,
    ModelMarginTemp,
    ModelMultiple,
    ModelTwoConfirm,
    ModelMarginChange,
    ChooseSymbolList,
    ShareImg,
    Tradingview,
    ModelReg,
  },
  data() {
    return {
      zhangTipDetail:{},
      zhangTipShow:false,
      noLogin: false,
      riskValue: "",
      fxShow: false,
      zhiyingfx: true,
      chooseIndex: 1,
      kLineShow: false,
      openOrClose: 1,
      timeDowner: 8 * 60 * 60 * 1000,
      backoutAllShow: false,
      backoutParams: {},
      backoutShow: false,
      allCloseShow: false,
      choosePositonDetail: {},
      twoConfirmForm: {
        side: "",
      },
      hierarchy: [],
      tabIndex2: 0,
      hideOther: false,
      currentModeInfo: {
        mode: 0,
        multiple: 20,
        maxMultiple: 125,
      },
      pageFormObj: {
        isStop: false,
        margin: 0,
        multiple: 20,
        showNum: "",
        price: "",
      },
      curyType: "token", //token,
      deepthData: [],
      orderList: [],
      stopOrderList: [],
      positionList: [],
      priceObj: {
        fundingRate: "",
        lastPrice: "",
        indexPrice: "",
        markPrice: "",
        maxPrice: "",
        minPrice: "",
        riseAndFallRange: "",
        sumNum: "",
        sumPrice: "",
      },
      orderOldParams: ["mergeContract", "1", ""],
      tabIndex: 1,
      contractWebSocket: createSocket(),
      walletWebSocket: createSocket(),
      currentSymbolInfo: {
        symbolId: "1",
        symbolName: "BTCUSDT",
        mainCurAccuracy: 2,
        mainCurName: "USDT",
        tokenCurAccuracy: 2,
        tokenCurName: "BTC",
        sheet: 0,
      },
      percentum: 0,
      submitForm: {
        stopProfitTrigger: "",
        stopLostTrigger: "",
        number: 0,
        price: "",
        isStop: false,
        multiple: 20,
      },
      priceModel: 0,
      option1: [
        { text: "限价单", value: 0 },
        { text: "市价单", value: 1 },
      ],
      intervalArr1: [
        {
          text: "分时",
          text1: this.$t("long.fenshi"),
          num: "0",
        },
        {
          text: "15分",
          text1: "15" + this.$t("long.fen"),
          num: "15",
        },
        {
          text: "1时",
          text1: "1" + this.$t("long.shi"),
          num: "60",
        },
        {
          text: "4时",
          text1: "4" + this.$t("long.shi"),
          num: "240",
        },
        {
          text: "1日",
          text1: "1" + this.$t("long.ri"),
          num: "1D",
        },
        {
          text: "1周",
          text1: "1" + this.$t("long.zhou"),
          num: "1W",
        },
        {
          text: "1月",
          text1: "1" + this.$t("long.yue"),
          num: "1M",
        },
      ],
      intervalArr2: [
        {
          text: "1分",
          text1: "1" + this.$t("long.fen"),
          num: "1",
        },
        {
          text: "5分",
          text1: "5" + this.$t("long.fen"),
          num: "5",
        },
        {
          text: "30分",
          text1: "30" + this.$t("long.fen"),
          num: "30",
        },
        {
          text: "12时",
          text1: "12" + this.$t("long.shi"),
          num: "720",
        },
      ],
      moreShow: false,
      intervalText: "15分",
    };
  },
  deactivated() {
    this.contractWebSocket.close();
    this.walletWebSocket.close();
  },
  activated() {
    if (this.getUserInfo.access_token && !this.getUserInfo.email) {
      this.noLogin = true;
    } else {
      this.noLogin = false;
    }
    this.currentSymbolInfo.symbolId =
      localStorage.getItem("chooseSymbolId") || "1";
    this.getSymbolInfo();
    this.socketWallet();
    this.handleTimeDowner();
    this.initLang();
    let fxgz = localStorage.getItem("fengxiangaozhi");
    this.fxShow = fxgz == 1 ? false : true;
  },
  watch: {
    // 隐藏其他合约
    hideOther(val) {
      this.getOrderList();
    },
    priceModel(val) {
      if (val == 0) {
        //限价
        // this.pageFormObj.price = this.priceObj.markPrice
      } else if (val == 1) {
        //市价
        this.pageFormObj.price = this.priceObj.markPrice;
      }
    },
    "pageFormObj.showNum"(val) {
      if (!val.toString().includes("%")) {
        this.percentum = 0;
      }
    },
    percentum(val) {
      if (val) {
        this.pageFormObj.showNum = val + "%";
      } else {
        this.pageFormObj.showNum = "";
      }
    },
  },
  computed: {
    ...mapGetters(["getUserInfo"]),
    showCanCloseDuo() {
      let retNum = 0;
      if (this.pageFormObj.showNum.toString().includes("%")) {
        retNum = (+this.canCloseDuo * +this.percentum) / 100;
      } else {
        retNum = +this.pageFormObj.showNum;
      }
      if (retNum) {
        if (this.curyType == "zhang") {
          return parseInt(retNum);
        } else {
          return this.$myfixedNum(
            +retNum,
            this.curyType == "token"
              ? +this.currentSymbolInfo.tokenCurAccuracy
              : +this.currentSymbolInfo.mainCurAccuracy
          );
        }
      } else {
        return "";
      }
    },
    showCanCloseKong() {
      let retNum = 0;
      if (this.pageFormObj.showNum.toString().includes("%")) {
        retNum = (+this.canCloseKong * +this.percentum) / 100;
      } else {
        retNum = +this.pageFormObj.showNum;
      }
      if (retNum) {
        if (this.curyType == "zhang") {
          return parseInt(retNum);
        } else {
          return this.$myfixedNum(
            +retNum,
            this.curyType == "token"
              ? +this.currentSymbolInfo.tokenCurAccuracy
              : +this.currentSymbolInfo.mainCurAccuracy
          );
        }
      } else {
        return "";
      }
    },
    canCloseDuo() {
      if (this.positionList.length) {
        let duoItem = this.positionList.find(
          (v) => v.side == "多" && v.symbolId == this.currentSymbolInfo.symbolId
        );
        if (duoItem) {
          return this.curyType != "zhang"
            ? this.curyType == "token"
              ? duoItem.nowNum
              : duoItem.uNowNum
            : parseInt(duoItem.nowNum * +duoItem.sheet);
        } else {
          return 0.0;
        }
      } else {
        return 0.0;
      }
    },
    canCloseKong() {
      if (this.positionList.length) {
        let duoItem = this.positionList.find(
          (v) => v.side == "空" && v.symbolId == this.currentSymbolInfo.symbolId
        );
        if (duoItem) {
          return this.curyType != "zhang"
            ? this.curyType == "token"
              ? duoItem.nowNum
              : duoItem.uNowNum
            : parseInt(duoItem.nowNum * +duoItem.sheet);
        } else {
          return 0.0;
        }
      } else {
        return 0.0;
      }
    },
    approximate() {
      let currentNum = 0;
      if (this.pageFormObj.showNum) {
        if (this.percentum) {
          currentNum = (+this.showCanUseNum * this.percentum) / 100;
        } else {
          currentNum = +this.pageFormObj.showNum;
        }
        if (this.curyType == "token") {
          currentNum = parseInt(currentNum * this.currentSymbolInfo.sheet) / this.currentSymbolInfo.sheet
          return +currentNum
          // return this.$myfixedNum(
          //   +currentNum,
          //   +this.currentSymbolInfo.tokenCurAccuracy
          // );
        } else if (this.curyType == "main") {
          currentNum = parseInt(currentNum * this.currentSymbolInfo.sheet) / this.currentSymbolInfo.sheet
          return +currentNum
          // return this.$myfixedNum(
          //   +currentNum,
          //   +this.currentSymbolInfo.mainCurAccuracy
          // );
        } else {
          return parseInt(+currentNum);
        }
      } else {
        return "";
      }
    },
    showCanUseNum() {
      let bigAmount = this.pageFormObj.margin * this.currentModeInfo.multiple;
      let amount = 0;
      // this.pageFormObj.margin
      if (this.curyType === "main") {
        amount = this.$myfixedNum(
          +bigAmount,
          +this.currentSymbolInfo.mainCurAccuracy
        );
      } else if (this.curyType === "token") {
        amount = this.$myfixedNum(
          +(bigAmount / this.priceObj.markPrice),
          +this.currentSymbolInfo.tokenCurAccuracy
        );
      } else if (this.curyType === "zhang") {
        amount = parseInt(
          +(bigAmount / this.priceObj.markPrice) * this.currentSymbolInfo.sheet
        );
      }
      return amount;
    },
    // 保证金
    showMargin() {
      let retNum = 0;
      let price = 0;
      let tokenNum = 0;
      if (this.percentum == 0) {
        if (this.priceModel == 0) {
          //限价
          price = +this.pageFormObj.price;
        } else {
          //市价
          price = +this.priceObj.markPrice;
        }
        if (this.curyType == "token") {
          retNum =
            (+this.pageFormObj.showNum * price) / this.submitForm.multiple;
        } else {
          retNum = +this.pageFormObj.showNum / this.submitForm.multiple;
        }
      } else {
        retNum = (this.pageFormObj.margin * this.percentum) / 100;
      }
      retNum = this.$myfixedNum(retNum, this.currentSymbolInfo.mainCurAccuracy);

      return retNum;
    },
  },
  methods: {
    changeCuryType(val){
      this.curyType = val;
      this.pageFormObj.showNum = '';
      localStorage.setItem('curyType',val)
    },
    showZhangTip(item){
        this.zhangTipDetail = item
        this.zhangTipShow = true
    },
    showRegModel() {
      this.$refs.modelReg.isShow = true;
    },
    initLang() {
      this.option1 = [
        { text: this.$t("long.xianjiadan"), value: 0 },
        { text: this.$t("long.shijiadan"), value: 1 },
      ];
      this.intervalArr1 = [
        {
          text: "分时",
          text1: this.$t("long.fenshi"),
          num: "0",
        },
        {
          text: "15分",
          text1: "15" + this.$t("long.fen"),
          num: "15",
        },
        {
          text: "1时",
          text1: "1" + this.$t("long.shi"),
          num: "60",
        },
        {
          text: "4时",
          text1: "4" + this.$t("long.shi"),
          num: "240",
        },
        {
          text: "1日",
          text1: "1" + this.$t("long.ri"),
          num: "1D",
        },
        {
          text: "1周",
          text1: "1" + this.$t("long.zhou"),
          num: "1W",
        },
        {
          text: "1月",
          text1: "1" + this.$t("long.yue"),
          num: "1M",
        },
      ];
      this.intervalArr2 = [
        {
          text: "1分",
          text1: "1" + this.$t("long.fen"),
          num: "1",
        },
        {
          text: "5分",
          text1: "5" + this.$t("long.fen"),
          num: "5",
        },
        {
          text: "30分",
          text1: "30" + this.$t("long.fen"),
          num: "30",
        },
        {
          text: "12时",
          text1: "12" + this.$t("long.shi"),
          num: "720",
        },
      ];
    },
    async getRiskGuarantee() {
      //风险保障基金
      const ret = await this.$http({
        url: `/wallet/liquidationExpensesStatistics/${this.currentSymbolInfo.symbolId}`,
        method: "get",
      });
      if (ret.data.code === 0) {
        this.riskValue = +ret.data.data;
      }
    },
    changeModel(mode) {
      this.currentModeInfo.mode = mode;
    },
    changeMultiple(multiple) {
      this.currentModeInfo.multiple = multiple;
    },
    async colosefx(queren) {
      if (queren == true) {
        const ret = await this.$http({
          url: `/user/user/confirmationRisk`,
          method: "put",
          data: {
            uid: this.getUserInfo.uid,
          },
        });
        if (ret.data.code === 0) {
          this.$store.dispatch("risk");
          localStorage.setItem("fengxiangaozhi", 1);
          this.fxShow = false;
        }
      }
      this.fxShow = false;
    },
    showKLine() {
      this.kLineShow = true;
      this.intervalText = localStorage.getItem("KintervalText") || "15分";
      this.$nextTick(() => {
        let symbolInfo = {
          symbolId: this.currentSymbolInfo.symbolId,
          symbolName: this.currentSymbolInfo.symbolName,
          height: "63vw",
        };
        this.$refs.trade.kInit(symbolInfo, 1);
      });
    },
    chooseInterval(item, index) {
      if (item.text == "分时") {
        this.$refs.trade.klinecharts.setStyleOptions({
          candle: { type: "area" },
        });
        this.$refs.trade.klinecharts.removeTechnicalIndicator("candle_pane");
        this.zhibiaoItem1 = {};
      } else {
        this.$refs.trade.klinecharts.setStyleOptions({
          candle: { type: "candle_solid" },
        });
      }
      this.chooseIndex = index;
      this.intervalText = item.text;
      localStorage.setItem("KintervalText", item.text);
      localStorage.setItem("Kinterval", item.num);

      this.moreShow = false;
      this.$refs.trade.targetInterval(item.num);
    },
    shareImg(detail) {
      this.$refs.shareImg.showShare(detail, this.getUserInfo);
    },
    handleChangeOpenOrClose(index) {
      this.openOrClose = index;
      this.pageFormObj.showNum = "";
      this.percentum = 0;
    },
    showTopRightTextModel(index) {
      if (index === 1) {
        Dialog.alert({
          title: this.$t("common.zijinfeilv"),
          message: this.$t("long.tip_zijinfeilv1"),
          confirmButtonText: this.$t("long.tip_zijinfeilv2"),
          theme: "round-button",
          messageAlign: "left",
          closeOnClickOverlay: true,
        }).then(() => {
          this.$router.push({
            path: "./zjhistory",
            query: {
              symbolId: this.currentSymbolInfo.symbolId,
              index: 0,
            },
          });
        });
      } else {
        Dialog.alert({
          title: this.$t("long.fengxianbzj"),
          message: this.$t("long.fengxianbzj1"),
          confirmButtonText: this.$t("long.fengxianbzj"),
          theme: "round-button",
          messageAlign: "left",
          closeOnClickOverlay: true,
        }).then(() => {
          this.$router.push({
            path: "./zjhistory",
            query: {
              symbolId: this.currentSymbolInfo.symbolId,
              index: 1,
            },
          });
        });
      }
    },
    //计算倒计时时间戳
    handleTimeDowner() {
      let time8 = new Date(new Date().toDateString() + " 8:00").getTime();
      let time16 = new Date(new Date().toDateString() + " 16:00").getTime();
      let time24 = new Date(new Date().toDateString() + " 23:59:59").getTime();

      let now = new Date().getTime();

      let timeret = 0;
      if (now > time8 && now < time16) {
        timeret = time16 - now;
      } else if (now > time16 && now < time24) {
        timeret = time24 - now;
      } else if (now < time8) {
        timeret = time8 - now;
      }
      this.timeDowner = timeret;
    },
    chooseSymbolItem({ id }) {
      if (id) {
        this.contractWebSocket.close();
        this.walletWebSocket.close();
        this.currentSymbolInfo.symbolId = id;
        this.pageFormObj.price = "";
        let time1 = setTimeout(() => {
          clearTimeout(time1);
          this.getSymbolInfo();
        }, 20);
      }
    },
    searchShow() {
      this.$refs.chooseSymbolList.searchshow = true;
    },
    goKline() {
      this.$router.push({
        path: "/kline",
        query: {
          symbolId: this.currentSymbolInfo.symbolId,
          symbolName: this.currentSymbolInfo.symbolName,
        },
      });
    },
    showStopTextModel() {
      Dialog.alert({
        title: this.$t("long.zhiyingsun1"),
        message: this.$t("long.tip_zhiyingsun"),
        confirmButtonText: this.$t("common.haode"),
        theme: "round-button",
        messageAlign: "left",
      }).then(() => {
        // on close
      });
    },
    targetIsStop() {
      this.pageFormObj.isStop = !this.pageFormObj.isStop;
      this.submitForm.stopProfitTrigger = "";
      this.submitForm.stopLostTrigger = "";
    },
    mainStopShow() {
      this.$refs.modelMainStop.reset();
      this.$refs.modelMainStop.show = true;
      this.$refs.modelMainStop.isZhiYing = true;
      this.$refs.modelMainStop.isZhiSun = true;
    },
    toLogList() {
      console.log("跳转");
      this.$router.push({
        path: "/aliHistory",
        query: {
          curyType: this.curyType,
        },
      });
    },
    async backoutBtn() {
      const ret = await this.$http({
        url:
          this.backoutParams.type == "order"
            ? `/contract/app/order/cancel`
            : `/contract/app/stoporder/cancel`,
        method: "post",
        data: this.backoutParams.id,
      });
      if (ret.data.code === 0) {
        Toast(this.$t("long.toast1"));
        this.backoutShow = false;
      }
    },
    async backoutOne(item) {
      this.backoutParams = item;
      this.backoutShow = true;
    },
    async backoutAll() {
      const ret = await this.$http({
        url:
          this.tabIndex2 == 0
            ? `/contract/app/order/cancel/all`
            : `/contract/app/stoporder/cancel/all`,
        method: "post",
      });
      if (ret.data.code === 0) {
        Toast(this.$t("long.toast1"));
        this.backoutAllShow = false;
      }
    },

    async hanldeAllClose() {
      //一键平仓
      const ret = await this.$http({
        url: `/contract/app/order/close/all`,
        method: "post",
      });
      if (ret.data.code === 0) {
        Toast(this.$t("long.contracttoast8"));
        this.allCloseShow = false;
      }
    },
    showChangeMargin(item) {
      this.$refs.modelMarginChange.show = true;
      this.$refs.modelMarginChange.detail = item;
      this.$refs.modelMarginChange.margin = this.pageFormObj.margin;
      this.$refs.modelMarginChange.getMarginInfo();
    },
    showTwoConfirm(operationType, side) {
      if (operationType == "开") {
        //
        if (!this.approximate) {
          Toast(this.$t("long.contracttoast10"));
          return;
        }
      } else {
        //平
        if (side == "多") {
          if (!this.showCanCloseDuo) {
            Toast(this.$t("long.contracttoast10"));
            return;
          }
        } else {
          if (!this.showCanCloseKong) {
            Toast(this.$t("long.contracttoast10"));
            return;
          }
        }
      }
      if (this.pageFormObj.isStop) {
        if (
          !this.submitForm.stopProfitTrigger &&
          !this.submitForm.stopLostTrigger
        ) {
          Toast(this.$t("long.contractn4"));
          return;
        }
      }
      this.twoConfirmForm = {
        side,
        operationType,
        multiple: this.currentModeInfo.multiple,
        symbolName: this.currentSymbolInfo.symbolName,
        curName:
          this.curyType != "zhang"
            ? this.curyType == "main"
              ? this.currentSymbolInfo.mainCurName
              : this.currentSymbolInfo.tokenCurName
            : this.$t("common.zhang"),
        priceModel: this.priceModel,
        number:
          operationType == "开"
            ? +this.approximate
            : side == "多"
            ? +this.showCanCloseDuo
            : +this.showCanCloseKong,
        mode: this.currentModeInfo.mode,
      };
      this.$refs.modelTwoConfirm.show = true;
    },
    // 止盈止损开仓
    openPostionStop(params) {
      this.openPosition(params, "stop");
    },
    // 开仓
    async openPosition(stopParams = {}, type = "order") {
      if (type == "order" && this.twoConfirmForm.operationType == "平") {
        //平仓
        let side = this.twoConfirmForm.side;
        let duoItem = this.positionList.find((v) => v.side == side);
        let number = 0;
        if (this.curyType == "token") {
          number = side == "多" ? this.showCanCloseDuo : this.showCanCloseKong;
        } else if (this.curyType == "main") {
          number =
            (side == "多" ? this.showCanCloseDuo : this.showCanCloseKong) /
            this.priceObj.markPrice;
        } else if (this.curyType == "zhang") {
          number =
            (side == "多" ? this.showCanCloseDuo : this.showCanCloseKong) /
            +duoItem.sheet;
        }

        number = parseInt(number * +this.duoItem.sheet) / +this.duoItem.sheet
        // number = this.$myfixedNum(
        //   +number,
        //   +this.currentSymbolInfo.tokenCurAccuracy
        // );

        let zparams = {
          num: +number,
          positionId: duoItem.id,
          price:
            this.priceModel == 1
              ? this.priceObj.markPrice
              : this.pageFormObj.price,
          type: this.priceModel == 1 ? 0 : 1,
        };

        const ret = await this.$http({
          url: "/contract/app/order/close",
          method: "post",
          data: zparams,
        });
        if (ret.data.code === 0) {
          Toast(this.$t("long.contracttoast2"));
          this.pageFormObj.showNum = "";
          this.percentum = 0;
          this.$refs.modelTwoConfirm.show = false;
        }
      } else {
        //开仓
        let number = 0;
        console.log(this.approximate);
        console.log(this.currentSymbolInfo);
        console.log("0000000");
        if (this.curyType == "token") {
          number = this.approximate;
        } else if (this.curyType == "main") {
          number = +this.approximate / this.priceObj.markPrice;
        } else if (this.curyType == "zhang") {
          number = +this.approximate / +this.currentSymbolInfo.sheet;
        }

        number = parseInt(number * +this.currentSymbolInfo.sheet) / +this.currentSymbolInfo.sheet

        // number = this.$myfixedNum(
        //   +number,
        //   +this.currentSymbolInfo.tokenCurAccuracy
        // );
        console.log(number);
        let params = {
          margin: this.showMargin,
          multiple: this.currentModeInfo.multiple,
          num: number,
          price:
            this.priceModel == 1
              ? this.priceObj.markPrice
              : this.pageFormObj.price,
          operationType: 0,
          positionMode: this.currentModeInfo.mode,
          symbolId: this.currentSymbolInfo.symbolId,
          type: this.priceModel == 1 ? 0 : 1,
        };
        //判断止盈止损参数

        // 默认止盈止损参数
        params.hasStopProfit = 0;
        params.hasStopLost = 0;

        if (JSON.stringify(stopParams) === "{}") {
          // 页面按钮
          if (this.pageFormObj.isStop) {
            params.stopProfitTrigger = this.submitForm.stopProfitTrigger;
            params.stopLostTrigger = this.submitForm.stopLostTrigger;
            if (params.stopProfitTrigger) {
              params.hasStopProfit = 1;
              params.stopProfitPrice = null;
              params.stopProfitType = 0;
            }
            if (params.stopLostTrigger) {
              params.hasStopLost = 1;
              params.stopLostPrice = null;
              params.stopLostType = 0;
            }
          } else {
            params.hasStopProfit = 0;
            params.hasStopLost = 0;
          }
          params.side = this.twoConfirmForm.side == "多" ? 0 : 1;
        } else {
          // 高级止盈止损
          stopParams.side = stopParams.side == "多" ? 0 : 1;
          params = {
            ...params,
            ...stopParams,
          };
        }
        console.log("提交开仓订单", params);
        const ret = await this.$http({
          url: `/contract/app/order/open`,
          method: "post",
          data: params,
        });
        if (ret.data.code === 0) {
          Toast(this.$t("long.toast4"));
          this.pageFormObj.showNum = "";
          this.percentum = 0;

          this.$refs.modelMainStop.show = false;
          this.$refs.modelTwoConfirm.show = false;
          this.pageFormObj.isStop = false;
          this.submitForm.stopProfitTrigger = "";
          this.submitForm.stopLostTrigger = "";
        }
      }
    },
    async handleShowMultiple(item) {
      this.choosePositonDetail = item;
      let zdata = await this.getModeInfo(
        item.symbolId || this.currentSymbolInfo.symbolId
      );
      this.$refs.modelMultiple.show = true;
      this.hierarchy = zdata.symbolHierarchy;
      this.$refs.modelMultiple.symbolId =
        item.symbolId || this.currentSymbolInfo.symbolId;
      this.$refs.modelMultiple.multiple =
        zdata.multiple || this.currentModeInfo.multiple || 20;
      this.$refs.modelMultiple.maxMultiple =
        zdata.maxMultiple || this.currentModeInfo.maxMultiple || 125;
    },
    async handleShowMode() {
      let zdata = await this.getModeInfo(this.currentSymbolInfo.symbolId);
      console.log("zdata", zdata);
      if (zdata.mode !== null) {
        //当前有仓位
        Toast(this.$t("long.buzhichijinmoshi"));
        return;
      }
      this.$refs.modelMarginTemp.show = true;
      this.$refs.modelMarginTemp.mode = this.currentModeInfo.mode || 0;
    },
    async getModeInfo(zid = "") {
      const ret = await this.$http({
        url: `/contract/app/position/exist-info`,
        method: "get",
        params: {
          symbolId: zid || this.currentSymbolInfo.symbolId,
        },
      });
      if (ret.data.code === 0) {
        let zdata = ret.data.data;
        return zdata;
      }
    },
    handlePositionStop(detail) {
      this.$refs.modelStop.reset();
      this.$refs.modelStop.show = true;
      this.$refs.modelStop.detail = detail;
      this.$refs.modelStop.processNum = 5;
      this.$refs.modelStop.submitForm.chufaPrice = detail.markPrice;
      this.$refs.modelStop.init();
    },
    handlePositionClose(detail) {
      this.$refs.modelClose.reset();
      this.$refs.modelClose.show = true;
      this.$refs.modelClose.detail = detail;
      this.$refs.modelClose.processNum = 5;
      this.$refs.modelClose.init();
    },
    choosePrice(price) {
      this.pageFormObj.price = price;
    },
    handleShowPriceChange(type) {
      if (type == "add") {
        this.pageFormObj.price = +this.pageFormObj.price + 1;
      } else {
        if (+this.pageFormObj.price >= 1) {
          this.pageFormObj.price = +this.pageFormObj.price - 1;
        }
      }
    },
    handleShowNumChange(type) {
      if (type == "add") {
        if (this.pageFormObj.showNum.toString().includes("%")) {
          if (this.percentum <= 99) {
            this.pageFormObj.showNum =
              +this.pageFormObj.showNum.replace("%", "") + 1 + "%";
            this.percentum += 1;
          }
        } else {
          this.pageFormObj.showNum = +this.pageFormObj.showNum + 1;
        }
      } else {
        if (this.pageFormObj.showNum.toString().includes("%")) {
          if (this.percentum >= 1) {
            this.pageFormObj.showNum =
              +this.pageFormObj.showNum.replace("%", "") - 1 + "%";
            this.percentum -= 1;
          }
        } else {
          this.pageFormObj.showNum = +this.pageFormObj.showNum - 1;
        }
      }
    },
    handleInputType(val) {
      if (val.toString().includes("%")) {
        return "text";
      } else {
        return "number";
      }
    },
    handleShuXian(item) {
      let num1 = +item.positionProfitRate;
      let num2 = +item.multiple;
      let num3 = +Math.ceil(num1 / num2 / 20);
      if (num3 < 0) {
        num3 = 1;
      } else if (num3 > 5) {
        num3 = 5;
      }
      return num3 || 1;
    },
    getDeepData(params) {
      let { oldDeepthParams, deepthParams } = params;
      this.contractWebSocket.websocket.send(oldDeepthParams);
      this.contractWebSocket.websocket.send(deepthParams);
    },
    getOrderList() {
      this.contractWebSocket.websocket.send(
        JSON.stringify({
          type: "unsubscribe",
          params: [
            "mergeContract",
            this.currentSymbolInfo.symbolId,
            this.hideOther ? 3 : "",
          ],
        })
      );
      this.contractWebSocket.websocket.send(
        JSON.stringify({
          type: "subscribe",
          params: [
            "mergeContract",
            this.currentSymbolInfo.symbolId,
            this.hideOther ? 3 : "",
          ],
        })
      );
      this.orderOldParams = [
        "mergeContract",
        this.currentSymbolInfo.symbolId,
        this.hideOther ? 3 : "",
      ];
    },
    socketWallet() {
      this.walletWebSocket.init({
        url: `/wallet/ws/info`,
        onopen: (msg, data) => {
          this.walletWebSocket.websocket.send(
            JSON.stringify({
              type: "subscribe",
              params: ["contractAccount", ""],
            })
          );
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[0] == "contractAccount") {
            this.pageFormObj.margin = this.$myfixedNum(
              +zdata.data.available,
              2
            );
            // this.orderForm.margin =
            //   +this.orderForm.margin > 0 ? +this.orderForm.margin : 0;
          }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    socketContract() {
      this.contractWebSocket.init({
        url: `/contract/ws/info`,
        onopen: (msg, data) => {
          this.$refs.deepth.getDeepList();
          this.getOrderList();
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[0] == "depthMap" && zdata.data["0"]) {
            this.deepthData = zdata.data;
          }
          if (zdata.params[0] == "mergeContract") {
            // this.showLoading = false;
            this.orderList = zdata.data.order || [];
            this.stopOrderList = zdata.data.stopOrder || [];
            this.positionList =
              zdata.data.position.map((v) => {
                v.shuxiannum1 = this.handleShuXian(v);
                v.shuxiannum2 = 5 - v.shuxiannum1;
                return v;
              }) || [];
            this.priceObj = zdata.data.detailed;
            if (!this.pageFormObj.price) {
              this.pageFormObj.price = this.$myfixedNum(
                this.priceObj.markPrice,
                +this.currentSymbolInfo.mainCurAccuracy
              );
            }
          }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    handleLevel() {
      this.$refs.deepth.levelList = this.currentSymbolInfo.levelList.map(
        (v) => ({ name: v })
      );
      this.$refs.deepth.levelList[0].color = "rgb(10, 122, 255)";
      this.$refs.deepth.currentLevel = this.currentSymbolInfo.levelList[0];
    },
    async getSymbolInfo() {
      const ret = await this.$http({
        url: `/contract/app/symbol/detail/${this.currentSymbolInfo.symbolId}`,
        method: "get",
        params: {},
      });
      if (ret.data.code === 0) {
        console.log(ret.data.data);
        this.hierarchy = ret.data.data.hierarchy;
        let detail = ret.data.data.detailed;
        this.currentSymbolInfo = {
          ...this.currentSymbolInfo,
          symbolName: detail.name,
          mainCurAccuracy: detail.mainCurAccuracy,
          mainCurName: detail.mainCurName,
          tokenCurAccuracy: detail.tokenCurAccuracy,
          tokenCurName: detail.tokenCurName,
          levelList: detail.level,
          sheet: +detail.sheet,
        };

        this.handleLevel();

        //判断仓位状态
        if (detail.existPositionInfoBO.mode === null) {
          this.currentModeInfo = {
            maxMultiple: detail.multiple || 125,
            mode: this.currentModeInfo.mode || 0, //0 逐仓  1 全仓
            multiple: detail.existPositionInfoBO.multiple || 20,
          };
        } else {
          this.currentModeInfo = detail.existPositionInfoBO;
        }

        this.socketContract();

        this.getRiskGuarantee();
      }
    },
    showPriceModelInfo() {
      if (this.priceModel == 0) {
        Dialog.alert({
          title: this.$t("long.xianjiawt"),
          message: this.$t("long.tip_wtxiangqing1"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          messageAlign: "left",
        }).then(() => {
          // on close
        });
      } else if (this.priceModel == 1) {
        Dialog.alert({
          title: this.$t("long.shijiawt"),
          message: this.$t("long.tip_wtxiangqing2"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          messageAlign: "left",
        }).then(() => {
          // on close
        });
      } else if (this.priceModel == 2) {
        Dialog.alert({
          title: this.$t("long.xianjiazhiyingsun"),
          message: this.$t("long.tip_wtxiangqing4"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          messageAlign: "left",
        }).then(() => {
          // on close
        });
      } else if (this.priceModel == 3) {
        Dialog.alert({
          title: this.$t("long.shijiazhiyingsun"),
          message: this.$t("long.tip_wtxiangqing5"),
          confirmButtonText: this.$t("common.haode"),
          theme: "round-button",
          messageAlign: "left",
        }).then(() => {
          // on close
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ybox {
  @import "../../assets/css/alicontract.scss";
}

.main4 {
  min-height: 50vh;
  background-color: #090A1B;
  .main41 {
    // padding:6vw 2vw 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .fotimg {
      width: 5.3vw;
      height: 5.3vw;
      position: absolute;
      top: 0vw;
      right: 2vw;
      z-index: 400;
    }
  }
}

.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
.ktushow {
  position: fixed;
  bottom: 16vw;
  width: 100vw;
  background-color: #090A1B;
  z-index: 1000;
}
.kxbox {
  width: 94vw;
  padding: 0 3vw;
  height: 10vw;
  display: flex;
  position: fixed;
  bottom: calc(16vw + constant(safe-area-inset-bottom));
  bottom: calc(16vw + env(safe-area-inset-bottom));
  left: 0;
  z-index: 999;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #8992AE;
  border-bottom: 1px solid #8992AE;
  background-color: #090A1B;
  .kx1 {
    font-size: 3.2vw;
    color: #fff;
    font-weight: 600;
  }
  .kx-img {
    width: 4vw;
    position: relative;
    top: -0.5vw;
  }
}
.xiala-img {
  position: absolute;
  right: 15px;
  top: 10px;
  width: 4vw;
  z-index: 9999;
}
::v-deep .van-overlay {
  z-index: 2000 !important;
}
</style>